<template>
	<GlobalBG title="修改密码" :showHeader="true" :showBack="true">
		<view class="container">
			<view class="box">
				<uni-forms ref="formRef" :modelValue="formData" label-width="100">
					<view class="module">
						<uni-forms-item label="初始密码" name="password" class="select-popup" required
							:rules="[{ required: true, errorMessage: '请输入' }]">
							<view class="fault-type-picker">
								<uni-easyinput type="password" :inputBorder="false" v-model="formData.password"
									placeholder="请输入"></uni-easyinput>

							</view>
						</uni-forms-item>
						<uni-forms-item label="修改密码" name="newpassword" class="select-popup" required
							:rules="[{ required: true, errorMessage: '请输入' }]">
							<view class="fault-type-picker">
								<uni-easyinput type="password" :inputBorder="false" v-model="formData.newpassword"
									placeholder="请输入"></uni-easyinput>

							</view>
						</uni-forms-item>
						<uni-forms-item label="确认密码" name="confirmpassword" class="select-popup nobline" required
							:rules="[{ required: true, errorMessage: '请输入' }]">
							<view class="fault-type-picker">
								<uni-easyinput type="password" :inputBorder="false" v-model="formData.confirmpassword"
									placeholder="请输入"></uni-easyinput>

							</view>
						</uni-forms-item>
					</view>


				</uni-forms>

			</view>
			<button type="submit" class="submit-btn" @click="onSubmit">确认修改</button>
		</view>
	</GlobalBG>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	let formData = ref({
		password: "",
		newpassword: "",
		confirmpassword: ""
	});
	const rules = ref({
		password: { required: true, message: "请输入" },
		newpassword: { required: true, message: "请输入" },
		confirmpassword: { required: true, message: "请输入" },
	});
	const formRef = ref<any>();
	const onSubmit = async () => {
		formRef.value
			.validate()
			.then(async () => { 
				alert(1)
			})
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100%;
		padding-top: 20rpx;


		.box {
			margin: 0 28rpx;
			margin-top: 20rpx;
			padding: 19rpx 28rpx 0 28rpx;
			background: #fff;
			border-radius: 15rpx;

			.uni-collapse-item__title-box {
				padding: 0;
			}

			.content-collapse {
				padding: 20rpx 25rpx;
				background: rgba(228, 239, 253, 0.6);
				border-radius: 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #666666;
				line-height: 38rpx;

				.text {
					padding-bottom: 20rpx;
				}
			}

			.uni-forms {
				flex: 1;
				overflow: auto;

				.module {
					.uni-forms-item {
						padding-left: 0;
						padding-right: 0;

						.uni-input-placeholder {
							padding-right: 12rpx;
							text-align: right;
							font-size: 30rpx;
						}

						.uni-input-input {
							height: 40rpx;
							text-align: right !important;
						}

						uni-textarea {
							background: #fff !important;
						}
						.uni-easyinput__content-input{
							text-align: right !important;
						}
					}
				}

				.uni-forms-item {
					margin-bottom: 20rpx;
					padding: 20rpx;
					padding-bottom: 36rpx;
					&.item-bg {
						background: #ffffff;
						box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 12, 39, 0.06);
						border-radius: 20rpx;
						padding: 30rpx 30rpx 100rpx 30rpx;

						:deep(.uni-forms-item__content) {
							position: static;
						}
					}

					.tip {
						font-size: 24rpx;
						color: #999;
						display: block;
						margin-top: 10rpx;
					}
				}

				.fault-type-picker {
					// padding-bottom: 20rpx;
					// display: flex;
					// align-items: center;
					// justify-content: space-between;
					// padding: 10rpx 0;
					// color: #666;
					// font-size: 28rpx;
				}
			}


		}

		.submit-btn {
			margin: 40rpx 28rpx;
			margin-top: 40rpx;
			height: 90rpx;
			line-height: 90rpx !important;
			background: #2263BF;
			border-radius: 12rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #ffffff;
		}
		.nobline{
			border-bottom: 0;
		}

	}
</style>